<template>
  <div class="flow-car">
    <!-- 中间图 -->
    <div class="center">
      <PieChart :pieChartData="pieChartData" :colorList="colorList"></PieChart>
    </div>
    <!-- 波形图 -->
    <svg-icon icon-class="waveform" class="waveform"></svg-icon>
    <!-- 背景椭圆 -->
    <img src="../../assets/images/car-pie-bg.png" alt="" class="ellipse-bg" />

    <!-- 左客 -->
    <div class="left" v-if="type == 'analysis'">
      <img src="../../assets/images/guestBg.png" alt="" class="left-bg" />
      <div v-for="(item, index) in guestCarList" class="left-car" :class="'guest' + [index + 1]" :key="index">
        <span class="number">{{ item.value }}</span>
        <span class="car-name">{{ item.name }}</span>
      </div>
    </div>
    <!-- 右货 -->
    <div class="right" v-if="type == 'analysis'">
      <img src="../../assets/images/vanBg.png" alt="" class="right-bg" />
      <div v-for="(item, index) in vanCarList" class="right-car" :class="'vans' + [index + 1]" :key="index">
        <span class="car-name">{{ item.name }}</span>
        <span class="number">{{ item.value }}</span>
      </div>
    </div>

    <!-- 客货占比 -->

    <div class="left-accounted" v-if="type == 'accounted'">
      <div class="accounted guest-car">
        <span class="number">{{ guestAccounted }}</span
        ><span>%</span>
      </div>
      <span>客车</span>
    </div>

    <div class="right-accounted" v-if="type == 'accounted'">
      <div class="accounted van-car">
        <span class="number">{{ vansAccounted }}</span
        ><span>%</span>
      </div>
      <span>货车</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CarAnalysis'
}
</script>
<script setup>
/**
 * @desc 客货分析-环状饼图
 * @auther 阳坤
 * @date 2022/10/21
 *
 **/

import PieChart from '../../components/charts/CarPie.vue'
import { ref, onMounted, defineProps } from 'vue'

const props = defineProps({
  // 类型  analysis显示客货分析     accounted显示占比
  type: {
    type: [String],
    default: 'accounted' // analysis  accounted
  },
  guestCarList: {
    type: Array,
    default: () => [] // 客车列表
  },
  vanCarList: {
    type: Array,
    default: () => [] // 货车列表
  },
  pieChartData: {
    type: Array,
    default: () => [] // 饼图数据
  },
  // 客车占比
  guestAccounted: {
    type: [Number, String],
    default: 0
  },
  // 货车占比
  vansAccounted: {
    type: [Number, String],
    default: 0
  }
})
const colorList = ref(['#19bbce', '#266BF4'])
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.flow-car {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    align-items: center;
    justify-content: space-between;

    .left,
    .right {
        position: absolute;
        width: 75px;

        .left-car,
        .right-car {
            position: absolute;
            font-size: 12px;
            display: flex;
            line-height: 11px;
            z-index: 9;
            width: 70px;

            .guest-car,
            .van-car {
                width: 16px;
                height: 16px;

            }

            .car-name {
                min-width: 30px;
                word-break: keep-all;
            }
        }

        .left-car {
            justify-content: flex-end;
            text-align: right;

            .number {
                font-weight: 700;
                font-size: 18px;
                padding-top: 1px;
            }
        }

        .right-car {
            justify-content: flex-start;

            .number {
                font-weight: 700;
                font-size: 18px;
                padding-top: 1px;
            }
        }

        .guest1 {
            left: -90%;
            top: 16%;
        }

        .guest2 {
            left: -110%;
            top: 36%;

        }

        .guest3 {
            left: -110%;
            bottom: 36%;
        }

        .guest4 {
            left: -90%;
            bottom: 15%;
        }

        .vans1 {
            left: 96%;
            top: 11%;
        }

        .vans2 {
            left: 112%;
            top: 25%;
        }

        .vans3 {
            left: 121%;
            top: 40%;
        }

        .vans4 {
            left: 120%;
            top: 54%;
        }

        .vans5 {
            left: 112%;
            bottom: 23%;
        }

        .vans6 {
            left: 98%;
            bottom: 9%;
        }

    }

    .left {
        top: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
    }

    .right {
        top: 50%;
        left: 50%;
        transform: translate(50%, -50%);
    }

    .left-bg,
    .right-bg {
        width: 100%;
        height: 160px;
    }

    .center {
        width: 120px;
        height: 120px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%); // height: 170px;
        z-index: 9;
    }

    .waveform {
        width: 61px;
        height: 56px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) // height: 170px;
    }

    .ellipse-bg {
        width: 142px;
        height: 96px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) // height: 170px;
    }

    .left-accounted {
        left: 10%;
        text-align: center
    }

    .right-accounted {
        left: 75%;
        text-align: center
    }

    .left-accounted,
    .right-accounted {
        .accounted {
            line-height: 14px;
            font-weight: 700;

            .number {
                font-size: 24px;
            }
        }

        .guest-car {
            color: @primary-color;
        }

        .van-car {
            color: #00B4C9;
        }

        .analysis-chart {
            position: relative;
            width: 120px;
            height: 120px;

            .waveform {
                width: 61px;
                height: 56px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%) // height: 170px;

            }
        }
    }

}
</style>
